<template>
  <div>
    <el-card>
      <div class="noptice-header flex items-center justify-between">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="getData">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <el-table :data="tableList">
        <el-table-column prop="title" label="公告标题"></el-table-column>
        <el-table-column
          prop="create_time"
          label="发布时间"
          width="280"
        ></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="editNoticeClick(scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              title="是否要删除该公告？"
              confirmButtonText="确认"
              cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button text type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加公告' : '修改公告'"
      @submit="submit"
    >
      <el-form
        ref="formRef"
        :model="fromData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="fromData.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="fromData.content"
            placeholder="请输入公告内容"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>

<script setup>
import Drawer from "@/components/Drawer/index.vue";
import { getNoticeList, addNotice, editNotice, delNotice } from "@/api/notice";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";
const { tableList, page, total, limit, getData, changePage, handleDelete } =
  useInitTable({
    getList: getNoticeList,
    del: delNotice,
  });

const {
  fromData,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    title: "",
    content: "",
  },
  create: addNotice,
  updata: editNotice,
  getData: getData,
  rules: {
    title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
    content: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
  },
});
</script>
